<template>
      <div class="hometo">
            <div class="mainto">
                <div class="mainnav">
                  <div class="puheadto">
                      <!-- 头部 -->
                    <div class="headto">
                        <div class="heleft">
                            <div class="adders">
                               <!-- <span>广州</span> -->
                                <router-link to="/Home/journal" class="iconfont icon-tianjia" tag="span">
          
                                </router-link>
                               <!-- <span class="iconfont icon-tianjia" ></span> -->
                            </div>
                        </div>
                        <div class="heseher">
                            <div class="input"  @click="$router.push('/seek')">
                              <span class="iconfont icon-sousuo_o"></span>
                               正宗黄焖鸡米饭
                            </div>
                        </div>
                        <div class="heright">
                            <div class="voice">
                               <span class="iconfont icon-gengduo" @click="$router.push('/cookbook')"></span>
                            </div>
                            <div class="voice">
                              <span class="iconfont icon-tixing1"></span>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
                <van-loading size="24px" vertical class="jijiaaiaai" v-if="guanlisttos=='' ">加载中...</van-loading>
                <!-- 内容 -->
                <div class="haonav">
                       <van-tabs swipeable>
                          <van-tab v-for="(item,index) in textss" :key="item" :title="item"  >
                              <!--关注  -->
                              <div class="content" v-if="index==0">
                                  <div class="haredtop">
                                      <div class="contenttoo">
                                          <h3>人间美食,会做饭很酷~</h3>
                                          <div class="text">
                                              <p>你关注人的动态会在这里出现</p>
                                              <p>为你推荐一些有趣的人,快关注TA们吧</p>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="haredmain">
                                      <div class="hmainindex" v-for="(item,index) in guanlisttos" :key="index">
                                          <div class="caption">
                                              <div class="images">

                                                 <img v-lazy='item.u.p' alt="">
                                              </div>
                                              <div class="name">
                                                  <h3>{{item.u.n}}</h3>
                                                  <p> <span class="fans">5.5w粉丝</span><span>75菜谱</span></p>
                                              </div>
                                              <div class="bottons" @click="guangzhuto(item.item_id)">
                                                  <div v-show="item.guangzu==false">
                                                     <span>关注</span>
                                                  </div>
                                                  <div class="tr" v-show="item.guangzu==true">
                                                     <span>已关注</span>
                                                  </div>
                                              </div>
                                              
                                          </div>
                                          <div class="greensimg" @click="gottodetail(item.item_id)">
                                               <img v-lazy="item.img" alt="">
                                          </div>
                                          <div class="lists">
                                              <div class="hander">
                                                  <div class="left">
                                                      <div class="imgtos" v-if="item.collect_users">
                                                          <div class="jis" v-for="(le) in item.collect_users" :key="le.id">
                                                            <img :src="le.p" alt="">
                                                          </div>
                                                      </div>
                                                      <div class="text">
                                                         {{item.collect_count_text}}
                                                      </div>
                                                  </div>
                                                  <div class="right">
                                                      <span class="iconfont icon-shoucang ry" @click="gosoucahng(item.item_id)" v-show="item.shucahngto == true"></span>
                                                      <span class="iconfont icon-shoucang"  @click="gosoucahng(item.item_id)" v-show="item.shucahngto == false"></span>
                                                      <!-- <span class="iconfont icon-shoucang"></span> -->
                                                      <span class="iconfont icon-pinglun-"></span>
                                                      <span class="iconfont icon-fenxiang1"></span>
                                                  </div>
                                              </div>
                                              <div class="editor">
                                                {{item.trim_title}}
                                              </div>
                                          </div>
                                      </div>
                                      
                                  </div>
                              </div>
                              <!-- 推荐 -->
                              <div class="content" v-if="index==1">
                                  <div class="haredtop">
                                      <div class="contenttootows">
                                          <van-swipe :autoplay="3000" show-indicators:true>
                                            <van-swipe-item v-for="(item, index) in banner" :key="index" width="100%" height="100px" >
                                              <img v-lazy="item"  style="width:100%; height:100px;" />
                                            </van-swipe-item>
                                          </van-swipe>
                                      </div>
                                  </div>
                                  <div class="haredmain">
                                      <!-- <div class="hmainindex" v-for="(item) in listgotxiang" :key="item.id">
                                          <div class="caption">
                                              <div class="images" >
                                                 <img v-lazy='item.author.p' alt="">
                                              </div>
                                              <div class="name">
                                                  <h3>{{item.author.n}}</h3>
                                                  <p> <span class="fans">5.5w粉丝</span><span>75菜谱</span></p>
                                              </div>
                                              <div class="bottons">
                                                  <div>
                                                     <span>关注</span>
                                                  </div>
                                              </div>
                                          </div>
                                          <div class="greensimg" @click="gottodetail(item.id)">
                                               <img v-lazy="item.image_u" alt="">
                                          </div>
                                          <div class="lists">
                                              <div class="hander">
                                                  <div class="left">
                                                      <div class="imgtos" v-if="item.collect_users">
                                                          <div class="jis" v-for="(it) in item.collect_users" :key="it.id">
                                                            <img :src="it.p" alt="">
                                                          </div>
                                                      </div>
                                                      <div class="text">
                                                          {{item.favo_count}}人收藏
                                                      </div>
                                                  </div>
                                                  <div class="right">
                                                      <span class="iconfont icon-shoucang ry" @click="gosoucahng(item.id)" v-show="item.shucahngto == true"></span>
                                                      <span class="iconfont icon-shoucang"  @click="gosoucahng(item.id)" v-show="item.shucahngto == false"></span>
                                                      <span class="iconfont icon-pinglun-"></span>
                                                      <span class="iconfont icon-fenxiang1"></span>
                                                  </div>
                                              </div>
                                              <div class="editor">
                                                {{item.title}}
                                              </div>
                                              <div class="activity">
                                                  <span class="iconfont icon-pinglun-"></span>&nbsp;有奖征集|一学就会的快手菜
                                              </div>
                                          </div>
                                      </div> -->
                                       <div class="hmainindex" v-for="(item) in listgotxiang_r" :key="item.id">
                                          <div class="caption">
                                              <div class="images" v-if="item.a">
                                                 <img v-lazy='item.a.p' alt="">
                                              </div>
                                              <div class="name">
                                                  <h3>{{item.a.n}}</h3>
                                                  <p> <span class="fans">5.5w粉丝</span><span>75菜谱</span></p>
                                              </div>
                                              <div class="bottons">
                                                  <!-- <div>
                                                     <span>关注</span>
                                                  </div> -->
                                              </div>
                                          </div>
                                          <div class="greensimg" @click="gottodetail(item.id)">
                                               <img v-lazy="item.img" alt="">
                                          </div>
                                          <div class="lists">
                                              <div class="hander">
                                                  <div class="left">
                                                      <div class="imgtos" v-if="item.collect_users">
                                                          <div class="jis" v-for="(it) in item.collect_users" :key="it.id">
                                                            <img :src="it.p" alt="">
                                                          </div>
                                                      </div>
                                                      <div class="text">
                                                          {{item.favo_count}}人收藏
                                                      </div>
                                                  </div>
                                                  <div class="right">
                                                      <span class="iconfont icon-shoucang ry" @click="gosoucahng(item.id)" v-show="item.shucahngto==true"></span>
                                                      <span class="iconfont icon-shoucang"  @click="gosoucahng(item.id)" v-show="item.shucahngto==false"></span>
                                                      <span class="iconfont icon-pinglun-"></span>
                                                      <span class="iconfont icon-fenxiang1"></span>
                                                  </div>
                                              </div>
                                              <div class="editor">
                                                {{item.n}}
                                              </div>
                                              <div class="activity">
                                                  <span class="iconfont icon-pinglun-"></span>&nbsp;有奖征集|一学就会的快手菜
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                               <!-- 视频 -->
                              <div class="contentshipin" v-if="index==2">
                                  <div class="haredmain">
                                      <div class="hmainindex" v-for="(item,index) in getshipinlis" :key="index" >
                                          <div class="caption">
                                              <div class="images">
                                                 <img v-lazy='item.a.p' alt="">
                                              </div>
                                              <div class="name">
                                                  <h3>{{item.a.n}}</h3>
                                                  <!-- <p> <span class="fans">5.5w粉丝</span><span>75菜谱</span></p> -->
                                              </div>
                                             
                                          </div>
                                          <div class="greensimg">
                                               <img v-lazy='item.img' alt="" @click="getmvtovidedetail(item.id)">
                                          </div>
                                          <div class="lists">
                                              <div class="hander">
                                                  <div class="left">
                                                      <div class="imgtos">
                                                          <div class="jis" v-for="(le) in item.collect_users" :key="le.id">
                                                            <img :src="le.p" alt="">
                                                          </div>
                                                      </div>
                                                      <div class="text">
                                                          {{item.collect_count_text}}
                                                      </div>
                                                  </div>
                                                  <div class="right">
                                                      <span class="iconfont icon-shoucang ry" @click="gosoucahngmv(item.id)" v-show="item.shucahngto==true"></span>
                                                      <span class="iconfont icon-shoucang"  @click="gosoucahngmv(item.id)" v-show="item.shucahngto==false"></span>
                                                      <!-- <span class="iconfont icon-shoucang"></span> -->
                                                  </div>
                                              </div>
                                              <div class="editor">
                                                {{item.n}}
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                               <!-- 笔记 -->
                              <div class="contentbiji" v-if="index==3">
                                  <div class="haredtop">
                                      <div class="contenttootows">
                                          <span class="textcopy">#我的双但美食vlog</span>
                                          <span class="textcopy">#秀早餐</span>
                                          <span class="textcopy">#秀午餐</span>
                                           <span class="textcopy">#秀晚餐</span>
                                          <span class="textcopy">#集合!我的2021</span>
                                          <span class="textcopy">#我的冬日限定</span>
                                          <span class="textcopy">#我的第一条笔记</span>
                                      </div>
                                  </div>
                                  <div class="haredmain">
                                      <div class="hmainindex">
                                          <div class="li" v-for="(item) in getbijipulist" :key="item.id">
                                              <div class="imgsto" @click="grttyopp(item.id)">
                                                <img  v-lazy='item.image_u' alt="">
                                              </div>
                                              <div class="textbear">
                                                  <div class="h3to">
                                                     {{item.title}}
                                                  </div>
                                                  <div class="textluo">
                                                      <div class="left">
                                                        <div class="img">
                                                          <img src="https://img1.baidu.com/it/u=2547362733,133834015&fm=15&fmt=auto" alt="">
                                                        </div>
                                                        <span>豆果小秘书</span>
                                                      </div>
                                                      <div class="right">
                                                        <span class="iconfont icon-modify"></span>
                                                         参与
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                               <!-- 活动 -->
                              <div class="contenthuodong" v-if="index==4">
                                  <div class="haredtop">
                                      <div class="contenttoo">
                                         <van-swipe :loop="true" :height="40" :autoplay="6000" vertical>
                                            <van-swipe-item  v-for="(item) in notices" :key="item.id">
                                              <div class="item">
                                                 <span class="notice">公告</span>
                                                 <span>{{item.name}}</span> 
                                                  {{item.action}}
                                                 <span>{{item.Activity}}</span>
                                                 
                                              </div>
                                            </van-swipe-item>
                                          </van-swipe>
                                      </div>
                                  </div>
                                  <div class="haredmain">
                                      <!-- 标题 -->
                                      <div class="caption">
                                          <div class="name">
                                              <h3>热门活动上线中~</h3>
                                          </div>
                                      </div>
                                      <div class="hmainindex" v-for="item in gethoplistspto" :key="item.id">
                                          <div class="greensimg">
                                               <img v-lazy="item.image" alt="">
                                          </div>
                                          <div class="lists">
                                              <div class="hander">
                                                  <div class="left">
                                                      <div class="text">
                                                          <span>{{item.name}}</span>
                                                      </div>
                                                  </div>
                                                  <div class="right">
                                                      <div class="span">
                                                        <span> 立即参与</span>
                                                        <span class="iconfont icon-right-1-copy"></span>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <!-- 烘焙 
                              <div class="contentbake" v-if="index==5">
                                <div class="haredmain">
                                    <div class="hmainindex">
                                        <div class="caption">
                                            <div class="name">
                                                <h3><span>精品&nbsp;|&nbsp;</span><span>双重芝士番茄酱</span></h3>
                                                <div>
                                                   <span class="iconfont icon-guankan01"></span>
                                                   <span>273200</span>
                                                   <span>&nbsp;&nbsp;</span>
                                                   <span class="iconfont icon-shoucang1"></span>
                                                   <span>11369</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="greensimg">
                                             <img v-lazy='"https://cp1.douguo.com/upload/caiku/8/e/e/400x266_8e0768827fa9796bac7a4b1ee450023e.jpg"'  alt="">
                                        </div>
                                        <div class="lists">
                                            <div class="hander">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              </div> -->
                          </van-tab>
                       </van-tabs>
                </div>
              
            </div>
      </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
import { Lazyload } from 'vant';
Vue.use(Lazyload);

import{ gethome ,getguangzu,getshipinlist,getbijilist,gethongdonglist }from'../api/home'

export default {
   data(){
      return{
          textss:[
            "关注",
            "推荐",
            "视频",
            "笔记",
            "活动",
            // "烘焙"
          ],
          images:[
            "https://cp1.douguo.com/upload/caiku/3/b/e/400x266_3b16e26a07dc7cf7419bb136fc98400e.jpg",
            "https://cp1.douguo.com/upload/caiku/8/e/e/400x266_8e0768827fa9796bac7a4b1ee450023e.jpg",
            "https://cp1.douguo.com/upload/caiku/a/9/3/400_a933546b20fc100e7c573c4f7fe30853.png",
            "https://i1.douguo.com/upload/keditor_img/20200727/20200727135002_65468.png",
            "https://cp1.douguo.com/upload/caiku/3/b/e/400x266_3b16e26a07dc7cf7419bb136fc98400e.jpg",
            "https://cp1.douguo.com/upload/caiku/3/b/e/400x266_3b16e26a07dc7cf7419bb136fc98400e.jpg",
          ],
          portrait:[
            "https://img1.baidu.com/it/u=4095057498,403099720&fm=26&fmt=auto",
            "https://img1.baidu.com/it/u=2983940918,1423373398&fm=26&fmt=auto",
            "https://img1.baidu.com/it/u=142920401,1547002743&fm=26&fmt=auto",
            "https://img2.baidu.com/it/u=3852840076,4074817644&fm=26&fmt=auto",
          ],
          pimgs:[
            "https://img0.baidu.com/it/u=1388616836,605911397&fm=15&fmt=auto",

          ],
          botimgs:[
            "https://img2.baidu.com/it/u=874978404,1243508837&fm=26&fmt=auto",
            "https://i1.douguo.com//upload/banner/1535595516.jpg"
          ],
          t:false,
          // 活动轮播文案
          notices:[
            {
            name:"Qiao Acc",
            action:"参加了活动",
            Activity:"我的双旦美食logo|年终美食创作大赛"
           },
            {
            name:"存真留存",
            action:"参加了活动",
            Activity:"免费申领|暖冬酱在川菜达人训练营第一期"
           },
            {
            name:"熊猫半塘1",
            action:"参加了活动",
            Activity:"第三届金龙鱼精英100%烘焙大师赛"
           },
            {
            name:"存真留存",
            action:"参加了活动",
            Activity:"倍佳容易圣诞季|圣诞美味征集大赛"
           },

          ],
          // 活动
          Activity:[
            {
              name:"第三届金龙鱼精英100%烘焙大师赛|匠心觉醒.精英集结",
              img:"https://img1.baidu.com/it/u=4095057498,403099720&fm=26&fmt=auto"
            },
            {
              name:"手机活动",
              img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.dmlei.com%2FPublic%2Fuploads%2Fusereditor%2F2017%2F01%2F23%2F74d29640e90a6015c62994905cf7eee6.jpg&refer=http%3A%2F%2Fimage.dmlei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643017323&t=bb1f56215296c77578e537693f0e33d4"
            },
            {
              name:"第三届金龙鱼精英100%烘焙大师赛",
              img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-fa46afec7f0225146248b157fe67739b_r.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643017323&t=ef796fbe147b0aef9378d23d4aa8ea20"
            }
          ],
          //活动
          imgsto:[
            
             {
               name:"第三届金龙鱼精英100%烘焙大师赛|匠心觉醒.精英集结",
               img:"https://i1.douguo.com//upload/note/b/d/4/bdffc50072cb0e48a66a4bb873699e64.jpg"
             },
             {
               name:"倍佳容易圣诞季|圣诞美味征集",
               img:"https://i1.douguo.com//upload/note/f/e/f/fe59501f4306d67bd1b13a994eb92aef.gif"
             },
             {
               name:"我的双旦美食logo|年终美食创作大赛",
               img:"https://i1.douguo.com//upload/note/5/b/0/5b5cf26bce82aaa3f1d0ccc25b5b1310.jpg"
             },
              {
               name:"橄榄精粹|中式烹饪大赛",
               img:"https://i1.douguo.com//upload/note/b/4/6/b455bb4ec30321c9e48786e8213db526.png"
             },
              {
               name:"川菜达人训练营第一期",
               img:"https://i1.douguo.com//upload/note/c/a/e/cab953a0d7a18e55909ac447fdacc78e.jpg"
             },
              {
               name:"感恩有你甜过圣诞",
               img:"https://i1.douguo.com//upload/note/c/d/1/cd9d4167b029fcf91f4664d960d80271.jpg"
             },
              {
               name:"我心中的冬日限定|记录温暖食刻",
               img:"https://i1.douguo.com//upload/note/2/6/2/26514850426437fd76963483af0943b2.png"
             },
          
          ],
          //广告01
          imgbeke:[
            "https://img1.baidu.com/it/u=2215967243,1054708117&fm=26&fmt=auto",
            "https://img0.baidu.com/it/u=4139951157,2280002893&fm=26&fmt=auto",
            //"https://img1.baidu.com/it/u=188607839,4094292383&fm=26&fmt=auto",
            "https://img2.baidu.com/it/u=2773909211,4138976323&fm=26&fmt=auto",
            "https://img2.baidu.com/it/u=139152859,272117353&fm=253&fmt=auto&app=138&f=JPG?w=500&h=281"
          ],
          datato:null,//推荐
          banner:[],//推荐轮播
          listgos:null,//推荐数据
          listgotxiang:[],//推荐数据note
          listgotxiang_r:[],//推荐数据r
          guzulist:null,//关注列表
          guanlisttos:[],//关注列表
          getshpinlidto:null,//视频
          getshipinlis:[],////视频
          getbijiputo:null,//笔记
          getbijipulist:[],//笔记
          gethoptop:null,//活动
          gethoplistspto:[],//活动
      }
   },
   methods:{
      //推荐
      getrecommended(){
           let listtos = [];
           gethome().then(data=>{
            console.log("推荐data",data)
            this.datato=data.result;
            //  console.log("this",this.datato)
              listtos = this.datato.banner;//轮播图
              // console.log(listtos)
              listtos.forEach(ele=>{
                this.banner.push(ele.i)
              })
              this.listgos=this.datato.list;
              // console.log("listgos",this.listgos)
              this.getlisto()
          })         
          
      },
      //推荐to
      getlisto(){
          this.listgos.forEach(ele=>{
              if(ele.note){
                let lsitsadd = new Set([ ele.note])
                  for (let e of lsitsadd) {
                        let {author,favo_count,collect_users,image_u,title,id} =e;
                        let data = {
                            author:author,
                            favo_count:favo_count,
                            collect_users:collect_users,
                            image_u:image_u,
                            title:title,
                            id:id,
                            shucahngto:false
                          }


                      this.listgotxiang.push(data)
                      // console.log(data) 
                  }
              }
              if(ele.r){
                  let lsitsaddto = new Set([ ele.r])
                  for (let e of lsitsaddto) {
                        let {a,img,collect_users,n,ph,id} =e;
                        let data = {
                            a:a,
                            img:img,
                            collect_users:collect_users,
                            n:n,
                            ph:ph,
                            id:id,
                            shucahngto:false
                          }
                      let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
                      if(collectcooklistto){
                          let indexto = collectcooklistto.findIndex(item =>item.id==data.id)
                          if(indexto!=-1){
                             data.shucahngto=true;
                          }
                      }

                      this.listgotxiang_r.push(data)
                      // console.log("r",data) 
                  }
              }
              //listgotxiang_r

          })
      },
      //关注
      getguanzhu(){
          getguangzu().then(data=>{
            console.log("关注",data)
            this.guzulist=data;
            let asdto = this.guzulist.result.rfs;
            // console.log(asdto)item_id: 3160559
            asdto.forEach(ele=>{
                let lsitsadd = new Set([ele])
                  for (let e of lsitsadd) {
                        let {collect_count_text,collect_users,img,u,id,trim_title,share_info,item_id} =e;
                        let data = {
                            collect_count_text:collect_count_text,
                            collect_users:collect_users,
                            img:img,
                            id:id,
                            u:u,
                            share_info:share_info,
                            trim_title:trim_title,
                            shucahngto:false,
                            item_id:item_id,
                            guangzu:false
                          } 
                      //搜藏
                      let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
                      if(collectcooklistto){
                          let indexto = collectcooklistto.findIndex(item =>item.id==data.item_id)
                          if(indexto!=-1){
                             data.shucahngto=true;
                          }
                      }
                      //关注
                      let attentionlisttopp = JSON.parse(sessionStorage.getItem('attentionlist'));//取数据
                        if(attentionlisttopp){
                          let indextoop = attentionlisttopp.findIndex(item =>item.id==data.item_id)
                          if(indextoop!=-1){
                             data.guangzu=true;
                          }
                        }
                      this.guanlisttos.push(data);
                      // console.log(this.guanlisttos)
                  }
            })
            
          })
      },
      //视频
      getshipin(){
        getshipinlist().then(data=>{
          console.log("视频",data)
          this.getshpinlidto=data;
          this.getshpinlidto.result.list.forEach(ele=>{
                let lsitsadd = new Set([ele.r])
                  for (let e of lsitsadd) {
                        let {collect_count_text,collect_users,img,n,id,a} =e;
                        let data = {
                            collect_count_text:collect_count_text,
                            collect_users:collect_users,
                            img:img,
                            n:n,
                            id:id,
                            a:a,
                            shucahngto:false
                          }
                          let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklistmv'));//取数据
                          if(collectcooklistto){
                              let indexto = collectcooklistto.findIndex(item =>item.id==data.id)
                              if(indexto!=-1){
                                data.shucahngto=true;
                              }
                          }  
                        this.getshipinlis.push(data)
                      // console.log("视频data",data)
                  }
          })
        })
      },
      //笔记
      getbijito(){
        getbijilist().then(data=>{
          console.log("笔记",data)
          this.getbijiputo = data;
          this.getbijiputo.result.list.forEach(ele=>{
              if(ele.note){
                   let lsitsadd = new Set([ele.note])
                  for (let e of lsitsadd) {
                        let {author,image_u,title,id} =e;
                        let data = {
                            author:author,
                            image_u:image_u,
                            title:title,
                            id:id,
                          } 
                      // console.log("笔记",data)
                      this.getbijipulist.push(data)
                  }
              }
          })
        })
      },
      //活动
      gethopdong(){
        gethongdonglist().then(data=>{
          // console.log("活动",data);
          this.gethoptop=data;
          this.gethoptop.data.ongoing.events.forEach(ele=>{
              // console.log(ele);
              let lsitsadd = new Set([ele])
                  for (let e of lsitsadd) {
                        let {date,duration,end_date,id,name,url,image} =e;
                        let data = {
                            date:date,
                            duration:duration,
                            end_date:end_date,
                            id:id,
                            image:image,
                            name:name,
                            url:url
                          } 
                      // console.log("活动",data)
                      this.gethoplistspto.push(data)
                  }
          })
        })
      },
      //数据居请求总
      getgototodo(){
        this.getrecommended();
        this.getguanzhu();
        this.getshipin();
        this.getbijito();
        this.gethopdong();
      },
      //跳到笔记
      grttyopp(id){
          // this.getbijipulist.findIndex(item=>item.id==id);
          console.log(id);
          let bijiId= id;
          // this.$router.push('/bijixiangqing')
          this.$router.push({name:"bijixiangqing",params:{data:bijiId}})
          window.sessionStorage.setItem('bijiId',JSON.stringify(bijiId));//存数据
          
      },
      //收藏 shucahngto
      gosoucahng(id){
         //推荐
         let index= this.listgotxiang_r.findIndex(item =>item.id==id)
         if(index != -1){
             console.log("index",index)
             this.listgotxiang_r[index].shucahngto =!this.listgotxiang_r[index].shucahngto
         }
         //推荐
         let indexto = this.listgotxiang.findIndex(item =>item.id==id)
          if(indexto != -1){
             console.log("indexto",)
             this.listgotxiang[indexto].shucahngto =!this.listgotxiang[indexto].shucahngto
            //  this.listgotxiang[indexto].shucahngto !=this.listgotxiang[index].shucahngto
         }
         //关注
         let indextop = this.guanlisttos.findIndex(item =>item.item_id==id)
          if(indextop != -1){
             console.log("indexto",)
             this.guanlisttos[indextop].shucahngto =!this.guanlisttos[indextop].shucahngto
            //  this.listgotxiang[indexto].shucahngto !=this.listgotxiang[index].shucahngto
         }
          // this.listgotxiang 收藏
          this.listgotxiang.forEach(ele=>{
              if(ele.shucahngto==true){
                  // let data=ele ;
                  let data={
                    a:ele.author,
                    id:ele.id,
                    img:ele.image_u,
                    title:ele.title,
                    shucahngto:ele.shucahngto
                  }
                  let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
                      if(collectcooklistto){
                        let ppop = collectcooklistto.findIndex(item=>item.id==data.id)
                        if( ppop == -1){
                            collectcooklistto.push(data)
                            window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistto));//存数据
                        }
                      }else{
                          let collectcooklistpto = []; //收藏菜谱数据；
                          collectcooklistpto.push(data)
                          window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistpto));//存数据
                      }
              }
              if(ele.shucahngto==false){
                let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
                if(collectcooklistto){
                  let im = collectcooklistto.findIndex(item=>item.id==ele.id);
                  if(im!=-1){
                      collectcooklistto.splice(im,1);
                      window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistto));//存数据

                  }
                }
              } 
          })
          //this.listgotxiang_r 收藏
           this.listgotxiang_r.forEach(ele=>{
              if(ele.shucahngto==true){
                  // let data=ele ;
                  console.log("r",ele)
                  let data={
                    a:ele.a,
                    id:ele.id,
                    img:ele.img,
                    title:ele.n,
                    titleto:ele.n,
                    shucahngto:ele.shucahngto
                  }
                  let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
                      if(collectcooklistto){
                        let ppop = collectcooklistto.findIndex(item=>item.id==data.id)
                        if( ppop == -1){
                            collectcooklistto.push(data)
                            window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistto));//存数据
                        }
                      }else{
                          let collectcooklistpto = []; //收藏菜谱数据；
                          collectcooklistpto.push(data)
                          window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistpto));//存数据
                      }
              }
               if(ele.shucahngto==false){
                let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
                if(collectcooklistto){
                  let im = collectcooklistto.findIndex(item=>item.id==ele.id);
                  if(im!=-1){
                      collectcooklistto.splice(im,1);
                      window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistto));//存数据

                  }
                }
              } 
          })
          // this.guanlisttos 收藏
           this.guanlisttos.forEach(ele=>{
              if(ele.shucahngto==true){
                  // let data=ele ;
                  // console.log(ele);
                  let data={
                    a:ele.u,
                    id:ele.item_id,
                    img:ele.img,
                    title:ele.n,
                    titleto:ele.trim_title,
                    shucahngto:ele.shucahngto
                  }
                  let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
                      if(collectcooklistto){
                        let ppop = collectcooklistto.findIndex(item=>item.id==data.id)
                        if( ppop == -1){
                            collectcooklistto.push(data)
                            window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistto));//存数据
                        }
                      }else{
                          let collectcooklistpto = []; //收藏菜谱数据；
                          collectcooklistpto.push(data)
                          window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistpto));//存数据
                      }
              }
               if(ele.shucahngto==false){
                let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
                if(collectcooklistto){
                  let im = collectcooklistto.findIndex(item=>item.id==ele.item_id);
                  if(im!=-1){
                      collectcooklistto.splice(im,1);
                      window.sessionStorage.setItem('collectcooklist',JSON.stringify(collectcooklistto));//存数据

                  }
                }
              } 
          })
          // let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklist'));//取数据
          // console.log(collectcooklistto)
      },
      //关注
      guangzhuto(id){
        console.log(id)
         let index= this.guanlisttos.findIndex(item =>item.item_id==id)
         if(index != -1){
             console.log("index",index)
             this.guanlisttos[index].guangzu =!this.guanlisttos[index].guangzu;
         }
         //item.item_id
        this.guanlisttos.forEach(ele=>{

            if(ele.guangzu==true){
              let data={
                  img:ele.img,
                  id:ele.item_id,
                  u:ele.u,
                  title:ele.trim_title
              }
              let attentionlistto = JSON.parse(sessionStorage.getItem('attentionlist'));//取数据
              if(attentionlistto){
                   let im = attentionlistto.findIndex(item=>item.item_id==data.id);
                  if(im==-1){
                      attentionlistto.push(data);
                      window.sessionStorage.setItem('attentionlist',JSON.stringify(attentionlistto));//存数据
                  }
              }else{
                  let  attentionlistplss=[];
                  attentionlistplss.push(data);
                  window.sessionStorage.setItem('attentionlist',JSON.stringify(attentionlistplss));//存数据
              }

            }

            if(ele.guangzu==false){
                let attentionlistto = JSON.parse(sessionStorage.getItem('attentionlist'));//取数据
                if(attentionlistto){
                  let im = attentionlistto.findIndex(item=>item.id==ele.item_id);
                  if(im!=-1){
                      attentionlistto.splice(im,1);
                      window.sessionStorage.setItem('attentionlist',JSON.stringify(attentionlistto));//存数据

                  }
                }
            }

        })

      },
      //跳到菜谱详情
      gottodetail(id){
          let detail = id;//detail   // console.log(asdto)item_id: 3160559
          console.log(id);
          console.log("detail",detail)
          window.sessionStorage.setItem('detail',JSON.stringify(detail));//存数据
          // this.$router.push('/detail')
          this.$router.push({name:"detail",params:{data:detail }})
      },
      //跳到mv详情
      getmvtovidedetail(id){
        let detailmv = id;
        console.log("detailmv",detailmv)
        window.sessionStorage.setItem('detailmv',JSON.stringify(detailmv));//存数据
        this.$router.push({name:"videdetail",params:{data:detailmv }})
        console.log(id)
      },
      //搜藏mvto
      gosoucahngmv(id){
          //搜藏
         let index= this.getshipinlis.findIndex(item =>item.id==id)
          if(index != -1){
              console.log("index",index)
              this.getshipinlis[index].shucahngto =!this.getshipinlis[index].shucahngto
          }
         
          this.getshipinlis.forEach(ele=>{
              if(ele.shucahngto==true){
                  let data={
                    a:ele.a,
                    collect_users:ele.collect_users,
                    id:ele.id,
                    img:ele.img,
                    title:ele.collect_count_text,
                    titleto:ele.collect_count_text,
                    shucahngto:ele.shucahngto,
                    n:ele.n
                  }
                  let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklistmv'));//取数据
                      if(collectcooklistto){
                        let ppop = collectcooklistto.findIndex(item=>item.id==data.id)
                        if( ppop == -1){
                            collectcooklistto.push(data)
                            window.sessionStorage.setItem('collectcooklistmv',JSON.stringify(collectcooklistto));//存数据
                        }
                      }else{
                          let collectcooklistpto = []; //收藏菜谱数据；
                          collectcooklistpto.push(data)
                          window.sessionStorage.setItem('collectcooklistmv',JSON.stringify(collectcooklistpto));//存数据
                      }
              }
               if(ele.shucahngto==false){
                  let collectcooklisttopo = JSON.parse(sessionStorage.getItem('collectcooklistmv'));//取数据
                  if(collectcooklisttopo){
                    let im = collectcooklisttopo.findIndex(item=>item.id==ele.id);
                    if(im!=-1){
                        collectcooklisttopo.splice(im,1);
                        window.sessionStorage.setItem('collectcooklistmv',JSON.stringify(collectcooklisttopo));//存数据

                    }
                  }
              } 
          })
      }
   },
                     
   created(){
     this.getgototodo()
     
   }

}

</script>

<style lang="less">
    .hometo{
      width: 100%;
      height: 100%;
       .mainto{
          width: 100%;
          height: 100%;
          padding-bottom: 60px;
          // box-sizing: border-box;
       }
    }
    .mainnav{
      width: 100%;
      height:50px;
      background-color: #ffffff;
      // padding-top: 10px;
      // box-sizing: border-box;
      .puheadto{
        width: 100%;
        height:50px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #ffffff;
        padding-top: 10px;
        box-sizing: border-box;
         z-index: 10;
      }
      // color:#ee0a24
     }
    //  头部
    .headto{
        //  margin-top: 10px;
         width: 100%;
         height: 30px;
         background-color: #ffffff;
        
         padding-left: 13px;
         padding-right: 13px;
         box-sizing: border-box;
         display:flex;
         justify-content: space-between;
         .heleft{
           width: 10%;
           height: 100%;
            .adders{
              width:28px;
              height: 28px;
              border-radius: 50%;
              background-color: #ffca30;
              margin: auto;
              text-align: center;
              line-height: 30px;
              font-size: 16px;
              font-weight: 550;
                span.iconfont{
                   color: #595959;
                  font-size: 20px;
                  font-weight: 700;
                }
            }
         }
         .heseher{
           width:60%;
           height: 100%;
          //  position: relative;
           
            .input{
              display: flex;
             align-items: center;
             width: 100%;
             height: 100%;
             border: 0;
             white-space: nowrap;
             overflow: hidden;
             text-align: center;
             line-height: 27px;
             text-overflow: ellipsis;
             color: #7d7d7d;
             background-color: #f5f5f5;
             padding-left: 5px;
             box-sizing: border-box;
             font-size: 10px;
             font-size: 600;
             border-radius: 6px;
             ime-mode: disabled;
              span{
                
                    color: #757575;
                    font-size: 16px;
                  
                  margin-right: 2px;
              }
           }
           
         }
         .heright{
           width: 20%;
           height: 100%;
           display: flex;
           color: #595959;
           .voice{
             width: 50%;
             height: 100%;
             text-align: center;
             span.iconfont{
               font-weight: 600;
               font-size: 24px;
             }
             line-height: 30px;
           }
         }
    }
    // 推荐等
    .haonav{
      margin-top: 10px;
      width: 100%;
      .van-tabs__wrap{
        height: 36px;
        .van-tabs__line{
               background-color:#ffc536
        }
        .van-tab{
            
          &.van-tab--active{
            
            font-size: 22px;
          }
        }
      }
      // 关注推荐
      .content{
        width: 100%;
        .haredtop{
          width: 100%;
          height: 100px;
          margin: auto;
          background-color: #fafafa;
          //关注的
          .contenttoo{
              width: 90%;
              margin: auto;
              padding-top: 10px;
              padding-bottom: 10px;
              box-sizing: border-box;
              line-height: 40px;
              
              .h3{
                   width: 100%;
                   height: 30px;
                   font-size: 14px;
                   overflow: hidden;
                   margin-bottom: 5px;
                }
              .text{
                
                 font-size: 12px;
                 color: #bdbdbd;
                p{
                  width: 100%;
                  height: 20px;
                  line-height: 20px;
                  overflow: hidden;
                  font-size: 12px;
                  color: #bdbdbd;
                }
              }
          }
          //推荐的
          .contenttootows{
             
              width: 100%;
              height: 100px;
              margin: auto;
              margin-top: 2px;
              overflow: hidden;
              line-height: 40px;
              img{
                width: 100%;
                height: auto;
                margin: auto;
              }
          }
        }
        .haredmain{
          width: 100%;
          .hmainindex{
            margin-top: 10px;
            width: 100%;
            // box-shadow:0px 1px 0px 0px #f6f6f6;
            //头像
            .caption{
              box-shadow:-1px -1px 0px 0px #f6f6f6;
              width: 100%;
              height: 60px;
              padding: 10px;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              .images{
                width: 15%;
                height: 100%;
                 display: flex;
                 align-items: center;
                 img{
                   width: 40px;
                   height: 40px;
                   margin: auto;
                   border-radius: 50%;
                 }
              }
              .name{
                width: 60%;
                height: 100%;
                line-height: 18px;
                h3{
                   font-size: 14px;
                   font-weight: 600;

                }
                p{
                  font-size: 10px;
                  color: #bdbdbd;
                }
              }
              .bottons{
                width: 20%;
                height: 100%;
                // position: relative;
                display: flex;
                align-items: center;
                div{
                  width: 60px;
                  height: 30px;
                  border-radius: 20px;
                  background-color: #ffc536;
                  margin: auto;
                  text-align: center;
                  font-size: 14px;
                  font-weight: 550;
                  line-height: 30px;
                    &.tr{
                         background-color: #92918d;
                        color: #f5f5f5;
                    }
                }
              }
            }
            //中图
            .greensimg{
              width: 100%;
              background-image: url('https://i1.douguo.com/upload/keditor_img/20200727/20200727135002_65468.png');
              background-size: 100%;
              background-position: center;
              background-repeat: no-repeat;
              img{
                width: 100%;
                height: auto;
                margin: auto;
              }
            }
            // 列表
            .lists{
              width: 100%;
              height: 100px;
              padding: 10px;
              box-sizing: border-box;
              .hander{
                width: 100%;
                height: 30px;
                display: flex;
                justify-content: space-between;
                .left{
                  width: 50%;
                  height: 100%;
                  display: flex;
                  justify-content: flex-start;
                  // align-items: center;
                  .imgtos{
                    width: 42%;
                    position: relative;
                    .jis{
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        border:3px solid #ffffff;
                        border-radius: 50%;
                        top: 2px;
                        img{
                          width: 20px;
                          height: 20px;
                          border-radius: 50%;
                        }
                    }
                    .jis:nth-child(1){
                      left:0px;
                      z-index: 1;
                    }
                     .jis:nth-child(2){
                      left:15px;
                      z-index: 2;
                    }
                     .jis:nth-child(3){
                      left:30px;
                      z-index: 3;
                    }
                    .jis:nth-child(4){
                      left:45px;
                      z-index: 4;
                    }
                  }
                  .text{
                      width: 50%;
                      height: 100%;
                      font-size: 12px;
                      line-height: 35px;
                  }
                }
                .right{
                  width: 30%;
                  height: 100%;
                  display: flex;
                  span{
                    display: block;
                    flex: 1;
                    font-size: 20px;
                    text-align: center;
                    line-height: 30px;
                    &.ry{
                      color: red;
                    }
                  }
                }
              }
              .editor{
                width: 100%;
                height: 30px;
                text-align: left;
                line-height: 30px;
                font-size: 14px;
                overflow: hidden;
              }
              .activity{
                width: 100%;
                height: 20px;
                font-size:12px;
                line-height: 20px;
                color: #71a2a8;
                span{
                  &.iconfont{
                    font-size: 12px;
                  }
                  
                }
              }
            }
          }
          .hmainindex:nth-child(1){
            margin-top: 0;
          }
        }
        
      }
       //视频
      .contentshipin{
        width: 100%;
        .haredmain{
          width: 100%;
          .hmainindex{
            margin-top: 10px;
            width: 100%;
            //头像
            .caption{
              box-shadow:-1px -1px 0px 0px #f6f6f6;
              width: 100%;
              height: 50px;
              padding: 10px;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              .images{
                width: 12%;
                height: 100%;
                 display: flex;
                 align-items: center;
                 img{
                   width: 30px;
                   height: 30px;
                   margin: auto;
                   border-radius: 50%;
                 }
              }
              .name{
                width: 86%;
                height: 100%;
                line-height: 18px;
                h3{
                   font-size: 14px;
                   font-weight: 600;
                    width: 100%;
                    height: 100%;
                    line-height: 30px;
                }
                p{
                  font-size: 10px;
                  color: #bdbdbd;
                }
              }
              .bottons{
                width: 20%;
                height: 100%;
                // position: relative;
                display: flex;
                align-items: center;
                div{
                  width: 60px;
                  height: 30px;
                  border-radius: 20px;
                  background-color: #ffc536;
                  margin: auto;
                  text-align: center;
                  font-size: 14px;
                  font-weight: 550;
                  line-height: 30px;
                }
              }
            }
            //中图
            .greensimg{
              width: 100%;
              img{
                width: 100%;
                margin: auto;
              }
            }
            // 列表
            .lists{
              width: 100%;
              height: 100px;
              padding: 10px;
              box-sizing: border-box;
              .hander{
                width: 100%;
                height: 30px;
                display: flex;
                justify-content: space-between;
                .left{
                  width: 50%;
                  height: 100%;
                  display: flex;
                  justify-content: flex-start;
                  .imgtos{
                    width: 42%;
                    position: relative;
                    .jis{
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        border:3px solid #ffffff;
                        border-radius: 50%;
                        top: 2px;
                        img{
                          width: 20px;
                          height: 20px;
                          border-radius: 50%;
                        }
                    }
                    .jis:nth-child(1){
                      left:0px;
                      z-index: 1;
                    }
                     .jis:nth-child(2){
                      left:15px;
                      z-index: 2;
                    }
                     .jis:nth-child(3){
                      left:30px;
                      z-index: 3;
                    }
                    .jis:nth-child(4){
                      left:45px;
                      z-index: 4;
                    }
                  }
                  .text{
                      width: 50%;
                      height: 100%;
                      font-size: 12px;
                      line-height: 35px;
                  }
                }
                .right{
                  width: 30%;
                  height: 100%;
                 
                  span{
                    display: block;
                    flex: 1;
                    font-size: 20px;
                    text-align: right;
                    line-height: 30px;
                    &.ry{
                      color: red;
                    }
                  }
                }
              }
              .editor{
                width: 100%;
                height: 30px;
                text-align: left;
                line-height: 30px;
                font-size: 14px;
                overflow: hidden;
              }
              .activity{
                width: 100%;
                height: 20px;
                font-size:12px;
                line-height: 20px;
                color: #71a2a8;
                span{
                  &.iconfont{
                    font-size: 12px;
                  }
                }
              }
            }
          }
          .hmainindex:nth-child(1){
            margin-top: 0;
          }
        }
        
      }
      // 笔记
      .contentbiji{
        width: 100%;
        .haredtop{
          width: 100%;
          height: 100px;
          margin: auto;
          background-color: #ffffff;
          .contenttoo{
              width: 90%;
              margin: auto;
              padding-top: 10px;
              padding-bottom: 10px;
              box-sizing: border-box;
              line-height: 40px;
          }
          //列表
          .contenttootows{
              width: 100%;
              height: 110px;
              margin: auto;
              margin-top: 2px;
              padding-top: 10px;
              padding-bottom: 10px;
              box-sizing: border-box;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-evenly;
              .textcopy{
                height: 40px;
                margin-top: 3px;
                margin-left: 5px;
                 margin-right: 5px;
                background-color: #f3f8fb;
                border-radius: 15px;
                padding: 10px;
                box-sizing: border-box;
                font-size: 10px;
                font-weight: 600;
                color:#3d8b93;
                // text-align: center;
                line-height: 20px;
              }
          }
        }
        .haredmain{
          width: 100%;
          .hmainindex{
            width: 100%;
            overflow: hidden;
            max-height: 1800px;
            margin-top: 10px;
            // padding: 10px;
            background-color: #fafafa;
            box-sizing: border-box;
            flex-direction: column;
            display: flex;
            // justify-content: space-between;
            // justify-content: space-around;
            flex-wrap: wrap;
            // align-items: flex-start;
           .li{
             width: 47%;
             height:auto;
             margin: 5px;
            //  min-height:240px;
            //  max-height:320px;
             margin-top: 6px;
             background-color: #ffffff;
             border-radius: 6px;
             .imgsto{
                width: 100%;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
               img{
                 border-top-left-radius: 6px;
                 border-top-right-radius: 6px;
                 width: 100%;
               }
             }
             .textbear{
               width: 100%;
              //  height: 85px;
               
               padding:10px ;
               box-sizing: border-box;
               .h3to{
                 width: 100%;
                 max-height: 40px;
                 overflow: hidden;
                 font-size: 14px;
                //  font-weight: 600;
                 line-height: 20px;
               }
               .textluo{
                 width: 100%;
                 
                 margin-top: 5px;
                 height: 23px;
                 display: flex;
                 line-height: 23px;
                 justify-content: space-between;
                 color: #cbcbcb;
                 .left{
                   width: 60%;
                   font-size: 10px;
                   display: flex;
                   .img{
                     width: 20px;
                     height: 20px;
                     display: flex;
                     align-items: center;
                     img{
                       width: 15px;
                       height: 15px;
                       border-radius: 50%;
                       margin: auto;
                     }
                   }
                 }
                 .right{
                   width: 40%;
                   line-height: 20px;
                   font-size: 12px;
                   text-align:right;
                   span{
                     &.iconfont{
                       font-size: 12px;
                       color: #5e9ba3;
                     }
                   }
                 }
               }
             }
           }
          }
        }
        
      }
      //活动 
      .contenthuodong{
        width: 100%;
        .haredtop{
          width: 100%;
          height: 50px;
          margin: auto;
          margin-top: 10px;
          .contenttoo{
              width: 96%;
              height: 40px;
              border-radius: 6px;
              background-color: #fafafa;
              margin: auto;
              box-sizing: border-box;
              line-height: 40px;
              overflow: hidden;
              .van-swipe{
                .van-swipe-item{
                  .item{
                    width: 100%;
                    height: 100%;
                    font-size: 12px;
                    padding-left: 10px;
                    padding-right: 10px;
                    box-sizing: border-box;
                    overflow: hidden;
                    line-height: 40px;
                    span{
                      &.notice{
                        padding: 2px;
                        border-top-right-radius: 8px;
                        border-bottom-left-radius: 8px;
                        font-size: 6px;
                        height: 14px;
                        margin-right: 5px;
                        background-color: #f5be36;
                      }
                      font-weight: 550;
                    }
                  }
                }
              }
          }
          
        }
        .haredmain{
          width: 100%;
           //标题
            .caption{
              width: 100%;
              height: 40px;
              padding: 10px;
              box-sizing: border-box;
              .name{
                width: 100%;
                height: 100%;
                h3{
                  width: 100%;
                  height: 100%;
                  font-size: 16px;
                  font-weight: 600;

                }
              }
              
            }
          .hmainindex{
            width: 100%;
            margin-top: 10px;
            //中图
            .greensimg{
              width: 100%;
              // height: 192px;
              
              padding-left: 10px;
              padding-right: 10px;
              box-sizing: border-box;
              border-radius: 10px;
              overflow: hidden;
              margin-bottom: 2px;
              z-index: 2;
              background-color: #ffffff;
              img{
                width: 100%;
                z-index: 0;
                margin: auto;
                // border-radius: 6px;
              }
            }
            // 列表
            .lists{
              width: 100%;
              padding: 10px;
              box-sizing: border-box;
              .hander{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .left{
                  width: 70%;
                  height: 100%;
                  display: flex;
                  justify-content: space-between;
                  .text{
                      width: 100%;
                      height: 100%;
                      font-size: 14px;
                      font-weight: 560;
                      line-height: 20px;
                  }
                }
                .right{
                  width: 21%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  align-self:center;
                  justify-content: flex-end;
                  .span{
                    width: 100%;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    line-height: 20px;
                    font-size: 14px;
                    // font-weight: 550;
                    color: #5e9ba3;
                    span{
                       &.iconfont{
                        font-size: 16px;
                      }
                    }
                  }
                }
              }
             
            }
          }
        }
      }
      // 烘焙
      .contentbake{
        width: 100%;
        .haredmain{
          width: 100%;
          .hmainindex{
            margin-top: 10px;
            width: 100%;
            //标题
            .caption{
              width: 100%;
              height: 65px;
              padding: 10px;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              .name{
                width: 100%;
                height: 100%;
                line-height: 22px;
                h3{
                   width: 100%;
                   font-size: 18px;
                   font-weight: 600;
                }
                div{
                  font-size: 10px;
                  color:#bdbdbd;
                }
              }
              
            }
            //中图
            .greensimg{
              width: 100%;
              padding-left: 10px;
              padding-right: 10px;
              box-sizing: border-box;
              border-radius: 6px;
              img{
                width: 100%;
                margin: auto;
                border-radius: 6px;
              }
            }
            // 列表
            .lists{
              width: 100%;
              height: 30px;
              padding: 10px;
              box-sizing: border-box;
              .hander{
                width: 100%;
                height: 10px;
                border-bottom: 1px solid #f6f6f6;
              }
            }
          }
          .hmainindex:nth-child(1){
            margin-top: 0;
          }
        }
        
      }
    }
     .jijiaaiaai{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -24px;
            margin-top: -24px;
            z-index: 99;
            
        }
   
</style>